<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>info-list</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.css">

</head>
<body>
<div>
    <a class="btn btn-light" href="/">index</a>
    <select name="pageSize" id="pageSize">
        <option value="10" selected>10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="50">50</option>
    </select>
    <a class="btn btn-primary" href="/jump/info-add">添加站点信息</a>
    <button class="btn btn-danger" id="bath-btn">批量删除</button>
    <table class="table">
        <thead class="thead-dark">
        <tr>
            <td><input type="checkbox"></td>
            <td>sitecode</td>
            <td>sitename</td>
            <td>longitude</td>
            <td>latitude</td>
            <td>edit</td>
        </tr>
        </thead>
        <tbody id="info-body">

        </tbody>
    </table>
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary" id="prePage">上一页</button>
        <input type="hidden" id="pageNum" value="1">
        <input type="hidden" id="pages" value="">
        <button type="button" class="btn btn-secondary" id="pageNumLi"></button>
        <button type="button" class="btn btn-secondary" id="nextPage">下一页</button>
    </div>
</div>


<script type="application/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
<script type="application/javascript">
    $(function () {
        let $pageSize = $("#pageSize");
        let $pageNum = $("#pageNum");
        let $pages = $("#pages");

        pageInfo();

        $pageSize.on('click', pageInfo);


        $("#prePage").on('click', () => {
            if ($pageNum.val() <= 1) {
                return;
            }
            $pageNum.val(parseInt($pageNum.val()) - 1);

            pageInfo();
        })

        $("#nextPage").on('click', () => {
            if ($pageNum.val() >= $pages.val()) {
                return;
            }
            $pageNum.val(parseInt($pageNum.val()) + 1);
            pageInfo();
        })

        function pageInfo() {
            $.ajax({
                url: '/info/page',
                dataType: 'JSON',
                type: 'GET',
                data: {
                    pageNum: $pageNum.val(),
                    pageSize: $pageSize.val(),
                },
                success: function (result) {
                    if (200 === parseInt(result.status)) {
                        var rd = result.data;
                        // console.debug(rd);
                        let $info = $("#info-body");
                        $info.html("");
                        $.each(rd.list, function (index, item) {
                            let infoBodyVar =
                                `<tr>
                                        <td><input type="checkbox" value="${item.siteid}"></td>
                                        <td>${item.sitecode}</td>
                                        <td>${item.sitename}</td>
                                        <td>${item.latitude}</td>
                                        <td>${item.longitude}</td>
                                        <td>
                                            <a class="btn btn-primary modifyBtn"  href="javascript:void(0);" id="${item.siteid}">修改</a>
                                            <a class="btn btn-danger delBtn" href="javascript:void(0);"
                                                id="${item.siteid}" infoName="${item.sitename}">删除</a>
                                        </td>
                                    </tr>`;
                            $info.append(infoBodyVar);
                        });
                        $("#pageSize option[value=" + rd.pageSize + "]").prop("selected", true);
                        $("#pageNumLi").text("当前页：" + rd.pageNum + "/" + rd.pages);
                        $("#pages").val(rd.pages);
                    } else {
                        alert("查询出现异常");
                    }
                },
                error: function () {
                    alert("服务器异常")
                }
            })
        }

        $(".modifyBtn").on('click', () => {
            console.log('modify');
            let idVal = $(this).attr('id');
            window.location.href = '/info/jump/' + idVal;
        })

        $('.delBtn').click(() => {
            console.log('del');
            let $this = $(this);
            let idVal = $this.attr('id');
            let infoNameVal = $this.attr('infoName');
            let flag = confirm('确定要删除' + infoNameVal + '吗？');
            if (flag) {
                $.ajax({
                    url: '/info/del',
                    dataType: 'JSON',
                    type: 'POST',
                    data: {delJson: JSON.stringify(idVal)},
                    success: function (result) {
                        if (200 === parseInt(result.status)) {
                            if (1 === parseInt(result.data)) {
                                alert("删除成功");
                                $this.parents('tr').remove();
                            } else {
                                alert("删除失败");
                            }
                        } else {
                            alert('删除出现错误');
                        }
                    },
                    error: function () {
                        alert("server error")
                    }
                })
            }

        })
    })
</script>

</body>
</html>